<template>
  <div
    class="p-2 my-2 border-2 border-gray-200 border-solid rounded-md"
    :class="[isActive?'border-red-200':'']"  
  >
    <div class="flex-sc">
      <div class="text-lg mr-2">
        <span v-if="idx<3" class="text-red-400">{{ idx+1 }}</span>
        <span v-else class="text-gray-400">{{ idx+1 }}</span>
      </div>
      <div class="w-14 h-14 mr-2">
        <img
          crossorigin="anonymous"
          class="wh-full bg-slate-400 rounded-full"
          :src="user?.avatar??'https://imgessl.kugou.com/kugouicon/165/20100101/20100101192931478054.jpg'"
        />
      </div>
      <div class="flex-1 flex-bc">
        <div>
          <div class="font-semibold line-clamp-1 break-all"> 
            <span>{{ info.name }}</span>
            <span class="text-gray-400"> - {{ info.author }}</span>
            <v-tooltip
              activator="parent"
              location="top"
            >{{ info.name }} - {{ info.author }}</v-tooltip>
          </div>
          <div class="text-gray-400 text-sm line-clamp-1 break-all">{{ user?.name }}</div>
        </div>
        <div>
          <v-menu location="bottom">
            <template v-slot:activator="{ props }">
              <v-icon icon="mdi-dots-vertical" v-bind="props"></v-icon>
            </template>
            <v-list>
              <v-list-item :disabled="isActive" @click="$emit('play')">
                <v-list-item-title>播放</v-list-item-title>
              </v-list-item>
              <v-list-item :disabled="isActive" @click="$emit('replace')">
                <v-list-item-title>替换</v-list-item-title>
              </v-list-item>
              <v-list-item :disabled="idx==0" @click="$emit('up')">
                <v-list-item-title>上移</v-list-item-title>
              </v-list-item>
              <v-list-item :disabled="idx==length-1" @click="$emit('down')">
                <v-list-item-title>下移</v-list-item-title>
              </v-list-item>
              <v-list-item :disabled="isActive" @click="$emit('remove')">
                <v-list-item-title>移除</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>
      </div>
    </div>
    <div>
      
    </div>
  </div>
</template>

<script setup lang="ts">

defineProps<{
  info: SongInfo;
  user?: UserInfo;
  idx:number;
  isActive:boolean;
  length:number
}>()
defineEmits<{
  (e: 'up'): void;
  (e: 'down'): void;
  (e: 'play'): void;
  (e: 'remove'): void;
}>()
</script>

<style scoped>

</style>